<template lang="html">
		<el-menu 
			:default-active="defaultActive" class="el-menu-vertical-demo" 
			:collapse="isCollapse" unique-opened router>
			
			<template v-for="nav in navs">
                <template v-if="nav.children">
                    <el-submenu :index="nav.href+'/'+nav.id" :key="nav.id">
                        <template slot="title">
                            <i :class="nav.icon"></i><span slot="title">{{ nav.name }}</span>
                        </template>
                        <template v-for="subNav in nav.children">
                            <el-submenu v-if="subNav.children" :index="subNav.href+'/'+subNav.id" :key="subNav.id">
                                <template slot="title">{{ subNav.name }}</template>
                                <el-menu-item v-for="threeItem in subNav.children" :key="threeItem.id" :index="threeItem.href+'/'+threeItem.id">
                                    {{ threeItem.name }}
                                </el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subNav.href+'/'+subNav.id" :key="subNav.id">
                                {{ subNav.name }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="nav.id" :key="nav.id">
                        <i :class="nav.icon"></i><span slot="title">{{ nav.name }}</span>
                    </el-menu-item>
                </template>
            </template>
			<!-- <el-menu-item v-for="(nav,index) in navs" v-if="nav.children.length==0" :index="nav.id + ''">
				<i class="el-icon-menu"></i>
				<span slot="title">{{nav.name}}</span>
			</el-menu-item>
			<el-submenu v-for="(nav1,index1) in navs" v-if="nav1.children.length!=0" :index="nav1.id + ''" >
				<template slot="title">
					<i class="el-icon-location"></i>
					<span slot="title">{{nav1.name}}</span>
				</template>
				<el-menu-item v-for="(nav2,index2) in nav1.children" v-if="nav2.children.length==0" :index="nav2.id+''" >
					<i class="el-icon-menu"></i>
					<span slot="title">{{nav2.name}}</span>
				</el-menu-item>
			</el-submenu> -->
		</el-menu>
</template>

<script>
  export default {
		data() {
			return {
				defaultActive:0
			};
		},
		created() {
			this.defaultActive = this.$route.path;
			if(this.defaultActive == '') {
				this.defaultActive = '/sys/dict/index/9';
			}
		},
		methods: {
		
			searchMenu(navs, menuId) {
				var _this = this;
				for(var i=0;i<navs.length;i++) {
					if(parseInt(navs[i].id) == parseInt(menuId)) {
							return navs[i];
					}
					
					if(navs[i].children!=null && navs[i].children.length > 0) {
						var navTmp = _this.searchMenu(navs[i].children, menuId)
						if(navTmp != null) {
							return navTmp;
						}
					}
				}
				return null;
			},
			handleSelect(key, keyPath) {
				var _this = this;
				var split1 = key.split('-');
				var navsTemp = _this.searchMenu(_this.navs, key);

				if(navsTemp != null) {
					_this.$emit('pageJump', {'path':navsTemp.href+'/'+navsTemp.id});
				}
				
			}
		},
		name:"menuItem",
		props: [ 'isCollapse','navs','parentIndex','level' ]
	}
</script>
